
$("#head_car").hover(function(){
    $(this).css("background", "#FBFEE9");
    $(".head_car_text").css("color", "#ff6700");
    $("#car_content").css({"width":"300px"}).animate({
        height:"100px"
    },400).finish();
},function(){
    $(this).css("background", "#424242");
    $(".head_car_text").css("color", "#b0b0b0");
    $("#car_content").css({"width":"300px"}).animate({
        height:"0px"
    },400);
})
// 下拉菜单
$(".menu_li").hover(function(){
    $("#menu_content_bg").css("border","1px solid #D0D0D0");
    $(this).css("color","#ff6700");
    $("#"+$(this).attr("control")).show();
    $("#menu_content_bg").height(230);
},function(){
    $("#"+$(this).attr("control")).hide();
   $(this).css("color"," #424242");
    $("#menu_content_bg").height(0);
    $("#menu_content_bg").css("border","0px solid #D0D0D0");
})

$("#find_input").focus(function(){
    $("#find_wrap").css("border","1px solid #ff6700");
    $("#find_but").css("border-left","1px solid #ff6700");
})
$("#find_input").blur(function(){
    $("#find_wrap").css("border","1px solid #F0F0F0");
    $("#find_but").css("border-left","1px solid #F0F0F0");
})

$("#find_but").hover(function(){
    $(this).css({"background":"#ff6700",color:"#fff"});
},function(){
    $(this).css({"background":"#fff",color:"#424242"});
})
 // 选项卡内容
 $("#banner_menu_wrap").children().hover(function(){
    $(this).css("background","#ff6700");
    $(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
    $(this).css("background","none");
    $(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
})
class Datails {
    constructor() {
        // 获取元素
        this.img = document.querySelector('.pic>img')
        this.title = document.querySelector('.title')
        this.price = document.querySelector('.price')
        this.details = document.querySelector('.details')
        this.pic = document.querySelector('.pic')
        this.mask = document.querySelector('.mask')
        this.bigBox = document.querySelector('.bigBox')
        this.bImg = document.querySelector('.bigBox>img')
        this.num = document.querySelector('.num')
        this.inp = document.querySelector('.num>input')
        this.button = document.querySelector('.button')
        this.bTop = document.querySelector('.back-top')
         this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init() {
        this.request()
        this.over()
        this.out()
        this.move()
        this.cll()
    }
    getQueryStr(name) {
        let id = location.search.slice(1)
        let obj = {}
        let arr = id.split('=')
        obj[arr[0]] = arr[1]
        return obj[name]
    }
    request() {
        // 先要判断id ,如果没有跳转到首页
        let myId = this.getQueryStr('id')
        if (!myId) {
            location.href = 'http://localhost:2205/index.html'
            return false
        } else {
            pAjax({ url: 'http://localhost:2205/libs/goods.json' })
                .then(data => {
                    let res = JSON.parse(data).slice(0, 20)
                    let goods = res.find(item => { return item.goods_id == myId })
                    this.render(goods)
                    this.addEle(goods)
                })
        }
    }
    // 把获取到的数据渲染在页面中
    render(data) {
        //图片
        this.img.src = data.img_small_logo
        //标题
        this.title.innerHTML = data.title
        //价格
        this.price.innerHTML = '￥' + data.current_price
        //商品详情
        this.details.innerHTML = data.goods_introduce
        //放大镜的图片
        this.bImg.src = data.img_small_logo
    }
    

    //放大镜
    over() {
        this.pic.onmouseover = () => {
            this.mask.style.display = 'block'
            this.bigBox.style.display = 'block'
        }

    }
    out() {
        this.pic.onmouseout = () => {
            this.mask.style.display = 'none'
            this.bigBox.style.display = 'none'
        }

    }
    move() {

        this.pic.onmousemove = (e) => {
            let x = e.clientX - this.mask.offsetWidth / 2 - this.pic.offsetParent.offsetLeft
            let y = e.clientY - this.mask.offsetHeight / 2 - this.pic.offsetParent.offsetTop
            if (x <= 0) {
                x = 0
            } else if (x >= this.pic.offsetWidth - this.mask.offsetWidth) {
                x = this.pic.offsetWidth - this.mask.offsetWidth
            }
            if (y <= 0) {
                y = 0
            } else if (y >= this.pic.offsetHeight - this.mask.offsetHeight) {
                y = this.pic.offsetHeight - this.mask.offsetHeight
            }
            let w = x / (this.pic.offsetWidth - this.mask.offsetWidth)
            let h = y / (this.pic.offsetHeight - this.mask.offsetHeight)
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            this.bImg.style.left = -w * (this.bImg.offsetWidth - this.bigBox.offsetWidth) + 'px'
            this.bImg.style.top = -h * (this.bImg.offsetHeight - this.bigBox.offsetHeight) + 'px'
        }

    }
   // 增加和减少
   addEle(data){
     this.num.addEventListener('click',e=>{
        let target =e.target || e.srcElement
        if(target.className == 'top'){
            this.inp.value++
             if(this.inp.value>1){
                this.button.disabled=false
             } 
        }
        if(target.className == 'button'){
            this.inp.value--
            if(this.inp.value <= 1){
                this.button.disabled = true
                this.inp.value =1
            }
            console.log(this.inp.value);
         }  
       if(target.className == 'btn'){
    let id = data.goods_id;
    let goods = this.list.find((item)=> {  return item.goods_id == id; });
    if(!goods){
      this.list.push(data)
      data.cart_number = this.inp.value
    }else{
      let res =this.list.some((item)=>{
          return item.goods_id == id
      })
      if(res){
          let index =this.list.findIndex(item=>{
              return  item.goods_id == id
          })
          this.list[index].cart_number = Number(this.inp.value) +Number(this.list[index].cart_number)
      }else{
          this.list.push(goods)
          goods.cart_number = this.inp.value
    }
       } 
       localStorage.setItem('cart',JSON.stringify(this.list))
        location.href ="http://localhost:2205/html/cart.html"
      
    }
     },false)
    
   }
     
 cll()
 {     
    window.onscroll=()=>{
    let topScroll =document.body.scrollTop || document.documentElement.scrollTop;//滚动的距离,距离顶部的距离
    if(topScroll >=1100 ){  
        this.bTop.style.display = 'block';
    } else {
        this.bTop.style.display = 'none';
    }
}
}
}

new Datails()